<template>
	<div>
		<div class="header">
			<div class="icon-left" @click="$router.goBack()"><img src="../../static/img/icon/release_icon/return@2x.png"/></div>
			<div>达人推荐</div>
			<div>
				
			</div>
		</div>
		<div class="header-null"></div>
		<div class="content-list-follow">
			<div class="mui-content mui-scroll-wrapper" id="followMore">
				<div class="mui-scroll">
					<div class="content-list-follow-list">
						<div class="item" v-for="(item,index) in userList">
							<img :src="item.headPortrait"/>
							<div>{{item.userName}}</div>
							<div class="btn" @tap="follow(item)" v-if="item.isFollow == null">
								关注
							</div>
							<div class="btn active" @tap="cancel(item)" v-else>
								已关注
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {getData} from '../service/getData'
	export default {
		data() {
			return {
				userList: [],
				page: 1,
				lastPage: 1
			}
		},
		methods: {
			init() {  //默认加载
				getData('/expertrecommend/getExpertRecommendApi', {
					pn: 1
				}).then(d => {
					if(d.code == 1) {
						this.userList = d.pageInfo.list
						this.lastPage = d.pageInfo.lastPage
					}
				})
			},
			follow(item) {  //关注
				getData('/follow/appAddFollow', {
					userId: item.userId
				}).then(d => {
					if(d.code == 100) {
						mui.toast(d.msg)
						item.isFollow = 1
					}
				})
			},
			cancel(item) {  //取消关注
				getData('/follow/appDeleteFollow', {
					token: sessionStorage.token,
					userId: item.userId
				}).then(d => {
					if(d.code == 100) {
						item.isFollow = null
					}
				})
			},
			pullupRefresh() {	//上拉加载
				if(this.lastPage != this.page) {
					getData('/expertrecommend/getExpertRecommendApi', {
						pn: this.page++
					}).then(d => {
						mui('#followMore').pullRefresh().endPullupToRefresh();
						if(d.code == 1) {
							this.userList = this.userList.concat(d.pageInfo.list)
						}
					})
				} else {
					mui('#followMore').pullRefresh().endPullupToRefresh(true);
				}
			},
			pulldownRefresh() { //下拉刷新
				getData('/expertrecommend/getExpertRecommendApi', {
					pn: 1
				}).then(d => {
					mui('#followMore').pullRefresh().endPulldownToRefresh();
					if(d.code == 1) {
						this.userList = d.pageInfo.list
						this.lastPage = d.pageInfo.lastPage
					}
				})
			}
		},
		mounted() {
			this.init()
			this.$nextTick(() => {
				mui.init({
	                pullRefresh: {
	                    container: '#followMore',
	                    up: {//上拉加载
	                    	height: 40,
	                        auto:false,//可选,默认false.自动上拉加载一次
	                        contentrefresh: '正在加载...',
	                        contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
	                        callback: this.pullupRefresh
	                    },
						down: {                        
							contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容                        
							contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容                        
							contentrefresh: "正在刷新…", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容                        
							auto: false,//可选,默认false.首次加载自动下拉刷新一次                        
							callback: this.pulldownRefresh                   
						}
	                }
	            });
			})
		}
	}
</script>

<style scoped lang="less">
	#followMore {
		margin-top: 50px;
	}

	.content-list-follow {
		border-bottom: 1px solid #eee;
		
		.content-list-follow-list {
			background: #fff;
			padding: 10px;
			display: flex;
			flex-wrap: wrap;
			
			.item {
				width: 33.3%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				text-align: center;

				img {
					width: 80px;
					height: 80px;
					border-radius: 50%;
				}
				
				.btn {
					padding: 2px 15px;
					border-radius: 5px;
					background: #c9eb59;
					color: #fff;
				}
				
				.active {
					background: #ccc;
					color: #7B7B7B;
				}
			}
		}
	}
</style>